<!--
 * @Author: 清羽
 * @Date: 2022-10-02 13:45:35
 * @LastEditTime: 2022-10-03 16:03:29
 * @LastEditors: you name
 * @Description: 
-->
<!-- myBusiness 页 -->
<template>
  <div class="myBusiness">
    <el-form label-width="130px">
      <el-form-item label="店铺轮播图">
        <div class="content">
          <div
            class="slideshowPic"
            v-for="(picItem,picIndex) in slideshowList "
            :key="picIndex"
          >
            <img :src="baseUrl+picItem.slideshow_path">

            <span class="hide">
              <div class="box">
                <span @click="openDialogVisible(picItem._id)">
                  <i class="el-icon-edit"></i>
                </span>
                <span @click="checkSlideshow(baseUrl+picItem.slideshow_path)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span @click="delSlideshow(picItem._id)">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </span>
          </div>

          <i
            class="el-icon-plus avatar-uploader-icon"
            @click="openDialogVisible()"
          ></i>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog
      :visible.sync="businessDialogVisible"
      width="80%"
      title="选择图片"
      @closed="empty"
    >
      <div class="businessList">
        <img
          class="businessPicItem"
          v-for="(businessPicItem,businessPicIndex) in businessPicList"
          :key="businessPicIndex"
          :src="baseUrl+businessPicItem.business_pic_path"
          @click="addSlideshow(businessPicItem)"
        >
        <el-upload
          class="avatar-uploader"
          name="business_pic"
          action
          :http-request="uploadFile"
          :show-file-list="false"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>

    </el-dialog>
    <!-- 选择图片弹窗 end -->

    <el-dialog
      :visible.sync="picDialogVisible"
      width="80%"
    >
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
    </el-dialog>
    <!-- 放大图片 end -->
  </div>
</template>

<script>
import { getBusinessPic, addBusinessPic, getSlideshow, addSlideshow, editSlideshow, delSlideshow } from '@/api/business/business'
export default {
  name: "myBusiness",
  data () {
    return {
      businessPicList: [],
      businessDialogVisible: false,
      baseUrl: this.$baseUrl,
      slideshowList: [],
      picDialogVisible: false,
      dialogImageUrl: '',
      selectAlterSlideshowIndexId: null
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getSlideshow()
  },
  // 函数
  methods: {
    // 上传文件 --- 添加店铺素材
    async uploadFile (item) {
      const file = item.file
      const FromData = new FormData()
      FromData.append(item.filename, file)
      await addBusinessPic(FromData).then(response => {
        // console.log("applyBusinessImg => response", response)
      })
      this.getBusinessPic()
    },
    // 获取店铺素材列表
    getBusinessPic () {
      getBusinessPic().then(response => {
        this.businessPicList = response.data.data
        console.log("getBusinessPic => this.businessPicList", this.businessPicList)
      })
    },
    // 打开弹窗图片选择
    openDialogVisible (index) {
      if (index) this.selectAlterSlideshowIndexId = index
      this.businessDialogVisible = true
      this.getBusinessPic()
    },
    // 添加轮播图
    async addSlideshow (item) {
      if (this.selectAlterSlideshowIndexId) { // 修改轮播图
        console.log('修改轮播图');
        const picPath = item.business_pic_path
        const data = { picPath, slideshowId: this.selectAlterSlideshowIndexId }
        await editSlideshow(data).then(response => {
        })
        this.getSlideshow().then(_ => {
          this.businessDialogVisible = false
        })
      } else { // 添加轮播图
        console.log('添加图');
        const picId = item._id
        await addSlideshow({ picId }).then(response => {
        })
        this.getSlideshow().then(_ => {
          this.businessDialogVisible = false
        })
      }
    },
    // 获取店铺轮播图
    async getSlideshow () {
      await getSlideshow().then(response => {
        this.slideshowList = response.data.data
        console.log("getSlideshow => this.slideshowList", this.slideshowList)
      })
    },
    // 查看图片
    checkSlideshow (picPath) {
      this.dialogImageUrl = picPath
      this.picDialogVisible = true
    },
    // 删除轮播图
    delSlideshow (picId) {
      delSlideshow({ slideshowId: picId }).then(response => {
        this.$message({
          type: 'success',
          message: response.data.msg
        })
        this.getSlideshow()
      })
    },
    // 关闭弹窗清空默认数据
    async empty () {
      this.selectAlterSlideshowIndexId = ''
      // console.log("empty => this.selectAlterSlideshowIndexId", this.selectAlterSlideshowIndexId)
      // console.log('ok');
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.myBusiness {
  .businessPicItem {
    width: 148px;
    height: 148px;
  }
  ::v-deep .businessList {
    display: grid;
    column-gap: 0.25rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .content {
    display: grid;
    column-gap: 0.25rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    .slideshowPic {
      width: 200px;
      height: 200px;
      border: 1px dashed #d9d9d9;
      position: relative;
      img {
        width: 200px;
      }
      &:hover > .hide {
        display: block;
      }
      .hide {
        display: none;
        position: absolute;
        background: rgba(0, 0, 0, 0.525);
        height: 100%;
        width: 200px;
        top: 0;
        left: 0;
        .box {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          i {
            font-size: 1.4rem;
            color: #8c939d;
            margin: 0 1.3rem;
            cursor: pointer;
            &:hover {
              color: white;
            }
          }
        }
      }
    }
    .avatar-uploader-icon {
      border: 1px dashed #d9d9d9;
      width: 200px;
      height: 200px;
      font-size: 28px;
      color: #8c939d;
      text-align: center;
      line-height: 200px;
      &:hover {
        border-color: #409eff;
      }
    }
  }

  // .avatar-uploader-icon {
  //   border: 1px dashed #d9d9d9;
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 148px;
  //   height: 148px;
  //   line-height: 178px;
  //   text-align: center;
  //   &:hover {
  //     border-color: #409eff;
  //   }
  // }
  // .avatar {
  //   width: 178px;
  //   height: 178px;
  //   display: block;
  // }
}
</style>